const canvas: HTMLCanvasElement = document.querySelector('canvas') as HTMLCanvasElement
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
canvas.width = screen.availWidth
canvas.height = screen.availHeight

// let str:string[] = 'WZJASON05142023'.split('')
let str:string[] = 'SUMMERDARM2023'.split('')
let arr = Array(Math.ceil(canvas.width / 10)).fill(0)
console.log(arr)

const rain = () => {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    ctx.fillStyle = '#0f0'
    arr.forEach((item, index) => {
         ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, item + 10)
         arr[index] = item > canvas.height || item > 12000 * Math.random() ? 0 : item + 10
    })

}   

// setInterval(rain, 40)